<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Katniss Premium Admin Template</title>
<link rel="stylesheet" href="css/style.default.css" type="text/css" />
<link rel="stylesheet" href="prettify/prettify.css" type="text/css" />
<script type="text/javascript" src="prettify/prettify.js"></script>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.9.2.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/custom.js"></script>
</head>

<body>

<div class="mainwrapper">
	
    <!-- START OF LEFT PANEL -->
    <div class="leftpanel">
    	
        <div class="logopanel">
        	<h1><a href="dashboard.html">Katniss <span>v1.0</span></a></h1>
        </div><!--logopanel-->
        
        <div class="datewidget">Today is Tuesday, Dec 25, 2012 5:30pm</div>
    
    	<div class="searchwidget">
        	<form action="http://themepixels.com/main/themes/demo/webpage/katniss/results.html" method="post">
            	<div class="input-append">
                    <input type="text" class="span2 search-query" placeholder="Search here...">
                    <button type="submit" class="btn"><span class="icon-search"></span></button>
                </div>
            </form>
        </div><!--searchwidget-->
        
        <div class="plainwidget">
        	<small>Using 16.8 GB of your 51.7 GB </small>
        	<div class="progress progress-info">
                <div class="bar" style="width: 20%"></div>
            </div>
            <small><strong>38% full</strong></small>
        </div><!--plainwidget-->
        
        <div class="leftmenu">        
            <ul class="nav nav-tabs nav-stacked">
            	<li class="nav-header">Main Navigation</li>
                <li><a href="dashboard.html"><span class="icon-align-justify"></span> Dashboard</a></li>
                <li><a href="media.html"><span class="icon-picture"></span> Media</a></li>
                <li class="dropdown"><a href="#"><span class="icon-briefcase"></span> UI Elements &amp; Widgets</a>
                	<ul>
                    	<li><a href="elements.html">Theme Components</a></li>
                        <li><a href="bootstrap.html">Bootstrap Components</a></li>
                    </ul>
                </li>
                <li class="dropdown"><a href="#"><span class="icon-th-list"></span> Tables</a>
                	<ul>
                    	<li><a href="table-static.html">Static Table</a></li>
                        <li><a href="table-dynamic.html">Dynamic Table</a></li>
                    </ul>
                </li>
                <li class="active"><a href="typography.html"><span class="icon-font"></span> Typography</a></li>
                <li><a href="charts.html"><span class="icon-signal"></span> Graph &amp; Charts</a></li>
                <li><a href="messages.html"><span class="icon-envelope"></span> Messages</a></li>
                <li><a href="buttons.html"><span class="icon-hand-up"></span> Buttons &amp; Icons</a></li>
                <li class="dropdown"><a href="#"><span class="icon-pencil"></span> Forms</a>
                	<ul>
                    	<li><a href="forms.html">Form Styles</a></li>
                        <li><a href="wizards.html">Wizard Form</a></li>
                        <li><a href="wysiwyg.html">WYSIWYG</a></li>
                    </ul>
                </li>
                <li><a href="calendar.html"><span class="icon-calendar"></span> Calendar</a></li>
                <li><a href="animations.html"><span class="icon-play"></span> Animations</a></li>
                <li class="dropdown"><a href="#"><span class="icon-book"></span> Other Pages</a>
                	<ul>
                    	<li><a href="404.html">404 Error Page</a></li>
                        <li><a href="invoice.html">Invoice Page</a></li>
                        <li><a href="editprofile.html">Edit Profile</a></li>
                        <li><a href="grid.html">Grid Styles</a></li>
                    </ul>
                </li>
            </ul>
        </div><!--leftmenu-->
        
    </div><!--mainleft-->
    <!-- END OF LEFT PANEL -->
    
    <!-- START OF RIGHT PANEL -->
    <div class="rightpanel">
    	<div class="headerpanel">
        	<a href="#" class="showmenu"></a>
            
            <div class="headerright">
            	<div class="dropdown notification">
                    <a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="http://themepixels.com/page.html">
                    	<span class="iconsweets-globe iconsweets-white"></span>
                    </a>
                    <ul class="dropdown-menu">
                    	<li class="nav-header">Notifications</li>
                        <li>
                        	<a href="#">
                        	<strong>3 people viewed your profile</strong><br />
                            <img src="img/thumbs/thumb1.png" alt="" />
                            <img src="img/thumbs/thumb2.png" alt="" />
                            <img src="img/thumbs/thumb3.png" alt="" />
                            </a>
                        </li>
                        <li><a href="#"><span class="icon-envelope"></span> New message from <strong>Jack</strong> <small class="muted"> - 19 hours ago</small></a></li>
                        <li><a href="#"><span class="icon-envelope"></span> New message from <strong>Daniel</strong> <small class="muted"> - 2 days ago</small></a></li>
                        <li><a href="#"><span class="icon-user"></span> <strong>Bruce</strong> is now following you <small class="muted"> - 2 days ago</small></a></li>
                        <li class="viewmore"><a href="#">View More Notifications</a></li>
                    </ul>
                </div><!--dropdown-->
                
    			<div class="dropdown userinfo">
                    <a class="dropdown-toggle" data-toggle="dropdown" data-target="#" href="http://themepixels.com/page.html">Hi, ThemePixels! <b class="caret"></b></a>
                    <ul class="dropdown-menu">
                        <li><a href="editprofile.html"><span class="icon-edit"></span> Edit Profile</a></li>
                        <li class="divider"></li>
                        <li><a href="#"><span class="icon-wrench"></span> Account Settings</a></li>
                        <li><a href="#"><span class="icon-eye-open"></span> Privacy Settings</a></li>
                        <li class="divider"></li>
                        <li><a href="index.html"><span class="icon-off"></span> Sign Out</a></li>
                    </ul>
                </div><!--dropdown-->
    		
            </div><!--headerright-->
            
    	</div><!--headerpanel-->
        <div class="breadcrumbwidget">
        	<ul class="skins">
                <li><a href="default" class="skin-color default"></a></li>
                <li><a href="orange" class="skin-color orange"></a></li>
                <li><a href="dark" class="skin-color dark"></a></li>
                <li>&nbsp;</li>
                <li class="fixed selected"><a href="#" class="skin-layout fixed"></a></li>
                <li class="wide"><a href="#" class="skin-layout wide"></a></li>
            </ul><!--skins-->
        	<ul class="breadcrumb">
                <li><a href="dashboard.html">Home</a> <span class="divider">/</span></li>
                <li class="active">Typography</li>
            </ul>
        </div><!--breadcrumbs-->
        <div class="pagetitle">
        	<h1>Typography</h1> <span>This is a sample description for typography page...</span>
        </div><!--pagetitle-->
        
        <div class="maincontent">
        	<div class="contentinner content-typography">
            	
                <div class="row-fluid">
                	<div class="span6">
                        <h4 class="widgettitle nomargin shadowed">Headings</h4>
                        <div class="widgetcontent bordered shadowed">
                            <h1>h1. Heading 1</h1>
                            <p>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.</p>
                            <h2>h2. Heading 2</h2>
                            <p>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.</p>
                            <h3>h3. Heading 3</h3>
                            <p>Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae.</p>
                            <h4>h4. Heading 4</h4>
                            <h5>h5. Heading 5</h5>
                            <h6>h6. Heading 6</h6>
                        </div><!--widgetcontent-->
                        
                        <h4 class="widgettitle nomargin shadowed">Blockquotes</h4>
                        <div class="widgetcontent bordered shadowed">
                        	<blockquote>
                              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                            </blockquote>
                            <div class="divider15"></div>
                            <blockquote>
                              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                              <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
                            </blockquote>
                            <div class="divider15"></div>
                            <blockquote class="pull-right">
                              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                              <small>Someone famous in <cite title="Source Title">Source Title</cite></small>
                            </blockquote>
                            <div class="clearfix"></div>
                        </div><!--widgetcontent-->
                        
                        <h4 class="widgettitle">Alerts</h4>
                        <div class="widgetcontent">
                        	<div class="alert">
                              <button data-dismiss="alert" class="close" type="button">×</button>
                              <strong>Warning!</strong> Best check yo self, you're not looking too good.
                            </div><!--alert-->
                            
                            <div class="alert alert-block">
                              <button data-dismiss="alert" class="close" type="button">×</button>
                              <h4>Warning!</h4>
                              <p>Best check yo self, you're not looking too good. Nulla vitae elit libero, a pharetra augue. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
                            </div><!--alert-->
                            
                            <div class="alert alert-error">
                              <button data-dismiss="alert" class="close" type="button">×</button>
                              <strong>Oh snap!</strong> Change a few things up and try submitting again.
                            </div><!--alert-->
                            
                            <div class="alert alert-success">
                              <button data-dismiss="alert" class="close" type="button">×</button>
                              <strong>Well done!</strong> You successfully read this important alert message.
                            </div><!--alert-->
                            
                            <div class="alert alert-info">
                              <button data-dismiss="alert" class="close" type="button">×</button>
                              <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
                            </div><!--alert-->
            
                        </div><!--widgetcontent-->
                        
                        <h4 class="widgettitle nomargin shadowed">Description</h4>
                        <div class="widgetcontent bordered shadowed">
                        	<dl>
                                <dt>Description lists</dt>
                                <dd>A description list is perfect for defining terms.</dd>
                                <dt>Euismod</dt>
                                <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
                                <dd>Donec id elit non mi porta gravida at eget metus.</dd>
                                <dt>Malesuada porta</dt>
                                <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
                        	</dl>
                            <div class="dline15"></div>
                            <dl class="dl-horizontal">
                                <dt>Description lists</dt>
                                <dd>A description list is perfect for defining terms.</dd>
                                <dt>Euismod</dt>
                                <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
                                <dd>Donec id elit non mi porta gravida at eget metus.</dd>
                                <dt>Malesuada porta</dt>
                                <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
                                <dt>Felis euismod semper eget lacinia</dt>
                                <dd>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>
                            </dl>
                        </div><!--widgetcontent-->
                        
                    </div><!--span6-->
                    
                    <div class="span6">
                    	
                        <h4 class="widgettitle nomargin shadowed">Pre &amp; Code</h4>
                        <div class="widgetcontent bordered shadowed">
                        	<pre class="prettyprint linenums">jQuery(document).ready(function(){
   alert('Hello World');
});</pre>	
							<div class="divider15"></div>
							<pre class="prettyprint">jQuery(document).ready(function(){
   alert('Hello World');
});</pre>		
							<div class="divider15"></div>
                            <code>jQuery(document).ready(function(){
   alert('Hello World');
});</code>		
						
                        </div><!--widgetcontent-->
                        
                        <h4 class="widgettitle nomargin shadowed">Emphasis Classes <a href="widgetsource.html" class="showhide">View Source</a></h4>
                        <div class="widgetcontent bordered shadowed">
                            <p class="muted">Fusce dapibus, tellus ac cursus commodo, tortor mauris nibh.</p>
                            <p class="text-warning">Etiam porta sem malesuada magna mollis euismod.</p>
                            <p class="text-error">Donec ullamcorper nulla non metus auctor fringilla.</p>
                            <p class="text-info">Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis.</p>
                            <p class="text-success">Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
                            <div class="widgetsource">
                            	<pre class="prettyprint linenums">&lt;p class=&quot;muted&quot;&gt;...&lt;/p&gt;
&lt;p class=&quot;text-warning&quot;&gt;...&lt;/p&gt;
&lt;p class=&quot;text-error&quot;&gt;...&lt;/p&gt;
&lt;p class=&quot;text-info&quot;&gt;...&lt;/p&gt;
&lt;p class=&quot;text-success&quot;&gt;...&lt;/p&gt;</pre>
                            </div><!--widgetsource-->
                        </div><!--widgetcontent-->
                        
                        <h4 class="widgettitle nomargin shadowed">List Styles</h4>
                        <div class="widgetcontent bordered shadowed">
                        	<div class="row-fluid">
                            	<div class="span6">
                                    <ul class="list-unordered">
                                      <li>Lorem ipsum dolor sit amet</li>
                                      <li>Consectetur adipiscing elit
                                      	<ul>
                                          <li>Phasellus iaculis neque</li>
                                          <li>Purus sodales ultricies</li>
                                        </ul>
                                      </li>
                                      <li>Faucibus porta lacus fringilla vel</li>
                                      <li>Aenean sit amet erat nunc</li>
                                    </ul>
                                    
                                    <div class="divider15"></div>
                                    <code>&lt;ul class=&quot;list-unordered&quot;&gt;</code>
                                    
                                    <div class="divider30"></div>
                                    
                                    <ul class="list-unordered list-checked">
                                      <li>Lorem ipsum dolor sit amet</li>
                                      <li>Consectetur adipiscing elit
                                      	<ul>
                                          <li>Phasellus iaculis neque</li>
                                          <li>Purus sodales ultricies</li>
                                        </ul>
                                      </li>
                                      <li>Faucibus porta lacus fringilla vel</li>
                                      <li>Aenean sit amet erat nunc</li>
                                    </ul>
                                    
                                    <div class="divider15"></div>
                                    <code>&lt;ul class=&quot;list-unordered list-checked&quot;&gt;</code>
                                    
                                    <div class="divider30"></div>
                                    
                                    <ul class="list-nostyle">
                                      <li><span class="icon-chevron-right"></span> Lorem ipsum dolor sit amet</li>
                                      <li><span class="icon-chevron-right"></span> Consectetur adipiscing elit
                                      	<ul>
                                          <li><span class="icon-check"></span> Phasellus iaculis neque</li>
                                          <li><span class="icon-check"></span> Purus sodales ultricies</li>
                                        </ul>
                                      </li>
                                      <li><span class="icon-chevron-right"></span> Faucibus porta lacus fringilla vel</li>
                                      <li><span class="icon-chevron-right"></span> Aenean sit amet erat nunc</li>
                                    </ul>
                                    
                                    <div class="divider15"></div>
                                    <code>&lt;ul class=&quot;list-nostyle&quot;&gt;</code>
                                    
                              </div><!--span6-->
                                
                                <div class="span6">
                                    <ol class="list-ordered">
                                      <li>Lorem ipsum dolor sit amet</li>
                                      <li>Consectetur adipiscing elit
                                      	<ol>
                                          <li>Phasellus iaculis neque</li>
                                          <li>Purus sodales ultricies</li>
                                        </ol>
                                      </li>
                                      <li>Faucibus porta lacus fringilla vel</li>
                                      <li>Aenean sit amet erat nunc</li>
                                    </ol>
                                    
                                    <div class="divider15"></div>
                                    <code>&lt;ul class=&quot;list-ordered&quot;&gt;</code>
                                    
                                    <div class="divider30"></div>
                                    
                                    <ul class="list-unordered list-checked2">
                                      <li>Lorem ipsum dolor sit amet</li>
                                      <li>Consectetur adipiscing elit
                                      	<ul>
                                          <li>Phasellus iaculis neque</li>
                                          <li>Purus sodales ultricies</li>
                                        </ul>
                                      </li>
                                      <li>Faucibus porta lacus fringilla vel</li>
                                      <li>Aenean sit amet erat nunc</li>
                                    </ul>
                                    
                                    <div class="divider15"></div>
                                    <code>&lt;ul class=&quot;list-unordered list-checked2&quot;&gt;</code>
                                    
                                    <div class="divider30"></div>
                                    
                                    <ul class="list-nostyle">
                                      <li><span class="icon-plus"></span> Lorem ipsum dolor sit amet</li>
                                      <li><span class="icon-plus"></span> Consectetur adipiscing elit
                                      	<ul>
                                          <li><span class="icon-star"></span> Phasellus iaculis neque</li>
                                          <li><span class="icon-star"></span> Purus sodales ultricies</li>
                                        </ul>
                                      </li>
                                      <li><span class="icon-plus"></span> Faucibus porta lacus fringilla vel</li>
                                      <li><span class="icon-plus"></span> Aenean sit amet erat nunc</li>
                                    </ul>
                                    
                                    <div class="divider15"></div>
                                    <code>&lt;ul class=&quot;list-nostyle&quot;&gt;</code>
                                    
                                </div><!--span6-->
                            </div><!--row-fluid-->
                        </div><!--widgetcontent-->
                        
                    </div><!--span6-->
                
                </div><!--row-fluid-->
                
            </div><!--contentinner-->
        </div><!--maincontent-->
        
    </div><!--mainright-->
    <!-- END OF RIGHT PANEL -->
    
    <div class="clearfix"></div>
    
    <div class="footer">
    	<div class="footerleft">Katniss Premium Admin Template v1.0</div>
    	<div class="footerright">&copy; ThemePixels - <a href="http://twitter.com/themepixels">Follow me on Twitter</a> - <a href="http://dribbble.com/themepixels">Follow me on Dribbble</a></div>
    </div><!--footer-->

    
</div><!--mainwrapper-->

</body>
</html>
